<template>
    <div class="line"></div>
</template>

<script setup>
import * as echarts from 'echarts/core';
import { onMounted, defineProps } from 'vue';
const props = defineProps({
    data: {
        type: Array,
        default: [20, 30, 40, 30, 70, 50, 40, 20, 10,]
    },
    label: {
        type: Array,
        default: ['6-27', '6-28', '6-29', '6-30', '7-1', '7-2', '7-3', '7-4', '7-5']
    }

})
onMounted(() => {
    const line = echarts.init(document.querySelector('.line'));
    line.setOption(lineOption);
})

const lineOption = {
    grid: {
        top: "15%",
        left: "5%",
        right: "10%",
        bottom: "15%",
        containLabel: true,
    },
    title: [
        {
            text: '位数/时',
            left: 'left',
            top: 'top',
            textStyle: {
                color: '#fff',
                fontSize: 12
            }
        },
        {
            text: '单位:千/kw.h',
            right: 'right',
            top: 'top',
            textStyle: {
                color: '#fff',
                fontSize: 12
            }
        }
    ],
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: props.label,


    },
    yAxis: [
        {
            type: "value",
            position: "left",
            axisLabel: {
                color: "#ffffff63",
            },

            // 如果需要网格线也为虚线，可以添加以下配置
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed', // 设置网格线为虚线
                    color: "#f2f3f5",
                }
            },
            axisLine: {
                lineStyle: {
                    color: "#fff",
                    width: 2,
                },
            },
        },
    ],
    series: [
        {
            type: "line",
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: 1,
            lineStyle: {
                normal: {
                    color: "#6c4983",
                },
            },
            itemStyle: {
                color: "red",
                borderColor: "#fff",
                borderWidth: 3,
            },
            tooltip: {
                show: false,
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "#451b80",
                            },
                            {
                                offset: 1,
                                color: "#124760",
                            },
                        ],
                        false
                    ),
                },
            },
            data: props.data,
        },
    ],
};

</script>

<style scoped>
.line {
    height: 100%;
    width: 100%;
}
</style>